iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 22

[Day 22] 阿嬤都看得懂的元素容器與隱藏空格解法

  • 分享至 

  • xImage
  •  

阿嬤都看得懂的元素容器與隱藏空格解法

昨天我們做出了滿版橫幅的粉紅貼紙,今天要開始切中央的橘色貼紙與黃色貼紙了!我們在之前曾經提到,最好把黃色貼紙群的標籤,包含在橘色貼紙的標籤裡面;這是因為希望黃色貼紙群的位置,能夠被橘色貼紙的位置所決定。像這種把整群元素,用父元素打包帶走的狀況下,我們就把這個父元素稱作「容器」(英文會是 container 或 wrapper)。


橘色貼紙大概佔整個版面寬度的 80%,所以寬度就是 80vw。高度呢?上方粉紅貼紙的高度是 20vh,底下綠色貼紙和粉紅貼紙差不多大,所以也是 20vh。那麼,中間的橘色貼紙高度就是 100vh - 20vh - 20vh = 60vh。那麼,橘色貼紙要怎麼擺在正中間呢?
既然橘色貼紙的寬度是 80vw,我們把剩下的白邊寬度算出來,再除以 2,就會可以用外距,把橘色貼紙推到中間。因此,橘色貼紙的左側外距,會是 (100vw - 20vw) / 2 = 10 vw。因此,我們會寫下這樣的樣式:

.orange{
  height: 60vh;
  width: 80vw;
  background-color: orange;
  margin-left: 10vw;
}

等等,每次置中都要這樣算,也太累了吧!而且置中這件事情,很明顯是有規律的啊!只要我們把父元素的寬度,減去子元素的寬度,再除以 2 ,就會是子元素的 margin 不是嗎?這個應該電腦自己就可以算了吧!

沒錯,所以 CSS 很貼心地提供 auto 這個值,只要我們把左右兩邊的外距都設成 auto,就會自動把元素水平置中囉!該怎麼快速設定左右兩邊的外距呢?記得我們說過 margin 只設定 2 個值時,前者是垂直,後者是水平嗎?因此,只要寫下

margin: 0 auto;

就可以把元素水平置中囉!

接下來,我們就來處理裡面的 8 個黃色貼紙吧!這 8 個黃色貼紙要滿足下面幾個條件:

  1. 這 8 張貼紙要橫向排列;
  2. 這 8 張貼紙要 4 個 1 列;
  3. 列中的 4 張貼紙彼此間,還有和橘色貼紙的左右兩邊,都是等距的;
  4. 這 8 張貼紙要排成 2 列;
  5. 這 2 列彼此間,還有橘色貼紙的上下兩邊,都是等距的。

條件 1 比較簡單,還記得我們讓區塊元素水平排列的方式嗎?沒錯,就是使用

  • display 這個屬性,並且把值改為 inline-block。

想滿足條件 2 到 條件 5,就必須做出些精密的計算了。

首先,我們來算算在一列中,我們有多少間距。由於一列中有 4 張黃色貼紙,黃色貼紙和橘色外框又有間距,所以會有 5 個間距。由於橘色貼紙的寬度是 80vw,所以這 5 個間距 + 4 張貼紙的寬度,就要等於 80vw。我們可以用幾個間距試試看,例如間距 2vw,這樣貼紙寬度就會是 (80vw - 2vw X 5) / 4 = 17.5vw,或者是間距 4vw,這樣貼紙寬度就會是 (80vw - 4vw X 5) / 4 = 15vw。這邊並沒有硬性的規定,端看有沒有特別的要求。我在這裡會採用間距 4vw、貼紙寬度 15vw 的方式來處理。

同理,由於橘色貼紙的高度是 60vh,2 列黃色貼紙就會有 3 個間距。按照上面的方式計算,我選擇間距 4vh,貼紙高度 24vh,加起來正好 60vh。寬、高、間距都準備好以後,我們就要開始寫樣式囉!

其中,最需要思考的,應該就是間距應該怎麼寫。你可能會說,咦,不就按照橘色貼紙的寫法,寫 margin: 4vh 4vw 就好了嗎?不太對喔!如果這樣寫,就會上下左右都有 margin 了,所以貼紙之間的距離會變成 8vh 和 8vw 喔!

因此,我們其實會需要統一用某個方向來推出外距,例如水平的外距都推左邊,垂直的外距都推上面。還記得 margin 寫 4 個值的時候,分別表示哪個方向嗎?沒錯,就是上、右、下、左。因此,我們 margin 的值應該會是 4vh 0 0 4vw,而整個黃色貼紙的樣式應該會是:

.yellow{
  display: inline-block;
  height: 24vh;
  width: 15vw;
  background-color: yellow;
  margin: 4vh 0 0 4vw;
}

等等,可是看起來好像有點不太對勁?好像中間的間距比較寬,可是最右側的間距又比左側更窄?

沒錯,這樣的樣式設定,沒辦法讓我們獲得理想的結果。那麼,原因出在哪呢?莫非是我們的外距算錯了?在我們打開發展者工具檢查以後,發現好像也不是這樣。仔細計算一下,會發現所有外距都是如同我們的設定。那麼,究竟是哪邊出問題了呢?

還記得我們在 Day 9 使用 span 標籤的時候,把 span 標籤拆成許多行的時候,中間出現的隱藏空格嗎?沒錯,瀏覽器會把我們在 .html 當中,在標籤以外的換行,都自動補個空格來處理。這也是為什麼當 Day 9 把所有標籤頭尾連成一行後,這些空格就會自動消失。

所以,我們現在也是要把這些標籤頭尾相連嗎?這樣也太麻煩了吧!其實不用,既然我們已經知道它是空格,而空格本身其實也是個文字,而這個文字本身也有字型大小。聰明的阿嬤應該已經想到:那麼,不就只要把這個空格的字型大小歸零就好?沒錯,所以我們要在外層的橘色貼紙中,加上

font-size:0;

就會解決這個隱藏空格的問題囉!

最後的綠色貼紙和昨天的粉紅貼紙是類似的,就交給各位阿嬤自己完成囉!

完成的程式碼可以參考底下:
https://codepen.io/LogosChen/pen/qBjmvoX


想一想:

  1. 這些區塊元素全部都是使用 div 來表示,看起來是不是很混亂呢?我們有沒有更好的標籤,可以幫助我們在語意上區分這些區塊元素呢?
  2. 只要每列的區塊數量固定,其實我們可以按照規律算出每個等寬間隔的長度。這個規律是什麼呢?我們有沒有其他的樣式,可以讓我們不用每次都重新計算呢?

上一篇
[Day 21] 阿嬤都看得懂的滿版橫幅怎麼寫與 normalize.css
下一篇
[Day 23] 阿嬤都看得懂的進階 CSS 選擇器與偽類選擇器
系列文
你阿嬤成為網頁前端工程師的第一步30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言